<template>
  <div>
    <avue-crud
      ref="crud"
      v-model="form"
      :option="option"
      :table-loading="listLoading"
      :before-open="handleOpenBefore"
      :data="list"
      @on-load="getList"
      @row-update="update"
      @search-change="getList"
      @refresh-change="getList"
    />
  </div>
</template>

<script>
// import { doGet, doPost, doDelet, doPut } from '@/router/axios'
import { formCreate } from "@/api/index"
export default {
  name: 'TablePageBtn',
  props: {
    tableID: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      listLoading: true,
      list: [],
      form: {},
      option: {
        resizable: true,
        align: 'center',
        menuAlign: 'center',
        border: true,
        menu: true,
        addBtn: false,
        editBtn: true,
        delBtn: false,
        addRowBtn: false,
        refreshBtn: true,
        menuWidth: 120,
        column: [
          {
            fix: true,
            label: '主键',
            prop: 'id',
            span: 24,
            hide: true,
            editDisplay: false
          },
          {
            label: '表单主键',
            prop: 'tableId',
            hide: true,
            editDisplay: false
          },
          {
            // fix: false,
            label: '页面主键',
            prop: 'pageId',
            type: 'input',
            labelWidth: 120,
            width: 120,
            hide: false
          },
          {
            label: '按钮类型',
            prop: 'buttonTitle'
          },
          {
            label: '按钮内容',
            prop: 'buttonContent',
            labelWidth: 150,
            row: true
          },
          {
            label: '创建时间',
            prop: 'createTime',
            width: 150,
            hide: true,
            editDisplay: false
          },
          {
            label: '更新时间',
            prop: 'updateTime',
            width: 150,
            hide: true,
            editDisplay: false
          }
        ]
      }
    }
  },
  methods: {
    getList() {
      const params = {
        tableID: this.tableID
      }
      // doGet('/online/btn/getBtnsByTableId', params).then((res) => {
      //   this.list = res.data.data
      //   this.listLoading = false
      // })
      formCreate.getBtnsByTableId(params).then((res) => {
        this.list = res.data
        this.listLoading = false
      })
    },
    update(row, index, done, loading) {
      // doPost('/online/btn/update', this.form)
      //   .then((res) => {
      //     if (res.data.code == 200) {
      //       this.getList()
      //       done()
      //       this.$message.success('更新成功')
      //       return
      //     } else {
      //       this.$message.error(res.msg)
      //       return
      //     }
      //     loading()
      //   })
      //   .catch(() => {
      //     loading()
      //   })
       formCreate.btnUpdate(this.form)
        .then((res) => {
          if (res.code == 200) {
            this.getList()
            done()
            this.$message.success('更新成功')
            return
          } else {
            this.$message.error(res.msg)
            return
          }
          loading()
        })
        .catch(() => {
          loading()
        })
    },
    handleOpenBefore(show, type) {
      window.boxType = type
      if (['edit', 'views'].includes(type)) {
      } else if (type === 'add') {
      }
      show()
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-table__body-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: #f5f5f5;
}

/*定义滚动条轨道 内阴影+圆角*/
/deep/.el-table__body-wrapper::-webkit-scrollbar-track {
  /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
  /*border-radius: 10px;*/
  /*background-color: #F5F5F5;*/
}

/*定义滑块 内阴影+圆角*/
/deep/.el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px;
  /*-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);*/
  background-color: rgba(144, 147, 153, 0.3);
}
</style>
